<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer" />
    <title>ReadingBox</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        a{text-decoration:none;}
        [v-cloak]{display:none;}

        .fixed{position:fixed;bottom:0;left:0;right:0;background:#f9f9f9;}
        .fixed .download{height:50px;line-height:50px;padding:0 15px;display:flex;justify-content:space-between;align-items:center;}
        .fixed .download .logo{display:flex;justify-content:center;align-items:center;}
        .fixed .download .logo img{width:36px;height:36px;}
        .fixed .download .logo .label{display:inline-block;color:#222;font-size:14px;margin-left:7px;}
        .fixed .download .open{width:72px;height:28px;font-size:14px;line-height:28px;border-radius:14px;font-weight:500;background-image:linear-gradient(90deg,#5187FF,#5F88FF);color:#fff;text-align:center;}

        .video video{width:100%;display:block;}
        .video .title{font-size:16px;color:#333;line-height:22px;margin:15px 15px 0 15px;font-weight:600;}
        .video .source{padding:0 10px;display:flex;justify-content:space-between;font-size:13px;color:#bfbfbf;margin:10px 0;}
        .video .source>div{display:flex;justify-content:space-between;align-items:center;}
        .video .source>div img{width:25px;height:25px;border-radius:50%;margin-right:10px;}
        .blank{width:100%;height:10px;background:#F4F5FA;}
        .comment{padding-bottom:50px;}
        .comment .title{height:45px;line-height:45px;border-bottom:1px solid #F4F5FA;padding:0 15px;display:flex;justify-content:space-between;}
        .comment .title span:first-child{font-size:16px;color:#333;font-weight:600;position:relative;}
        .comment .title span:first-child::after{content:'';display:inline-block;width:25px;height:2px;background:#5187FF;position:absolute;bottom:0;left:50%;margin-left:-12.5px;}
        .comment .title span:last-child{font-size:13px;color:#808080;}

        .comment .inner .list{padding:0 15px;}
        .comment .inner .list .item{display:flex;padding-top:15px;}
        .comment .inner .list .left{width:40px;height:40px;background:#eee;border-radius:50%;}
        .comment .inner .list .left img{width:40px;height:40px;border-radius:50%;}
        .comment .inner .list .right{flex:1;margin-left:10px;padding-bottom:12px;border-bottom:1px solid #F4F5FA;}
        .comment .inner .list .right .name{font-size:13px;color:#808080;margin-top:5px;}
        .comment .inner .list .right .text{font-size:15px;color:#333;margin-top:10px;}
        .comment .inner .list .right .detail{background:#F4F5FA;padding:15px 10px;margin-top:10px;}
        .comment .inner .list .right .detail .row{margin-bottom:10px;font-size:13px;color:#333;}
        .comment .inner .list .right .detail .row:last-child{margin-bottom:0px;}
        .comment .inner .list .right .detail .row span:first-child{color:#5F88FF;}
        .comment .inner .list .right .detail .row a{color:#5F88FF;}
        .comment .inner .list .right .info{display:flex;justify-content:space-between;color:#999;font-size:12px;margin-top:13px;}

        .comment .inner .nolist{text-align:center;}
        .comment .inner .nolist img{width:182px;height:92px;margin:20px auto 10px;}
        .comment .inner .nolist .tips{color:#b3b3b3;font-size:13px;}
    </style>
</head>
<body>
    <div id="app">
        <div class="fixed">
            <a :href="baseUrl + '/app/web/download.html'" class="download">
                <div class="logo">
                    <img src="logo.png" alt="LOGO">
                    <div class="label">ReadingBox</div>
                </div>
                <div class="open">打开</div>
            </a>
        </div>
        <div class="video" v-cloak>
            <video :src="info.videoLink" :poster="info.coverUrl" controls></video>
            <div class="title">{{info.title}}</div>
            <div class="source">
                <div><img :src= "info.sourceIcon"><div>{{info.source}}</div></div>
                <div>{{info.playCount}}</div>
            </div>
        </div>
        <div class="blank"></div>
        <div class="comment" v-cloak>
            <div class="title"><span>评论 {{comments.totalElements}}</span></div>
            <div class="inner">
                <div class="list" v-if="comments.totalElements>0">
                    <div class="item" v-for="(item,index) in comments.dataList" :key="index">
                        <div class="left">
                            <img :src="item.photo || 'head.png'">
                        </div>
                        <div class="right">
                            <div class="name">{{item.name}}</div>
                            <div class="text">{{item.content}}</div>
                            <div class="detail" v-show="item.circleCommentsVOS.length>0">
                                <div class="row" v-for="(info,i) in item.circleCommentsVOS.slice(0,2)" :key="i"><span>{{info.name}}：</span>{{info.content}}</div>
                                <div class="row"><a :href="baseUrl + '/app/web/download.html'">查看更多></a></div>
                            </div>
                            <div class="info">
                                <span>{{item.createDate | filterTime}}</span><span>赞 {{item.praiseNumber}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nolist" v-else>
                    <img src="no.png" alt="无评论">
                    <div class="tips">暂无评论</div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
    <script>
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }

        function formatTime(time) {
            const d = new Date(time)
            const now = Date.now()

            const diff = (now - d) / 1000

            if (diff < 30) {
                return '刚刚'
            } else if (diff < 3600) {
                return Math.ceil(diff / 60) + '分钟前'
            } else if (diff < 3600 * 24) {
                return Math.ceil(diff / 3600) + '小时前'
            } else if (diff < 3600 * 24 * 2) {
                return '1天前'
            }
            
            return (d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分')
        }

        var app = new Vue({
            el: '#app',
            data: {
                videoId: '',
                info: {},
                comments: {},
                commentsDetail: [],
                commentsNumber: [],
                baseUrl: 'https://read.dlb.com'
            },
            mounted: function(){
                this.videoId = getQueryString('videoId')
                console.log(this.videoId)
                this.fetchData()
            },
            filters: {
                filterTime(time){
                    return formatTime(time)
                }
            },
            methods: {
                fetchData: function(){
                    var self = this;
                    axios.get(this.baseUrl + '/v1/video/info?videoId=' + this.videoId)
                    .then(function(res){
                        self.info = res.data.data
                        self.getComment()
                    })
                    .catch(function(err){
                        console.log(err);
                    })
                },
                getComment: function(){
                    var self = this;
                    axios.get(this.baseUrl + '/v1/circle/comments/shareList?page=1&size=2&commentsType=2&commentsObjectId=' + this.videoId)
                    .then(function(res){
                        self.comments = res.data.data
                    })
                    .catch(function(err){
                        console.log(err);
                    })
                }
            }
        })
    </script>
</body>
</html>